<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
#div1{
	float:left;
}
#div2{
	width: 400px;
	float: right;
	
}
#generator{
	width:200px;
	height:200px;
	border: 1px solid; 
	border-color:silver; 
}

#p1{
	width:200px;
	height:200px;
	border: 1px solid; 
	border-color:silver; 
}

#p2{
	width:200px;
	height:200px;
	border: 1px solid; 
	border-color:silver; 
}

#p3{
	width:200px;
	height:200px;
	border: 1px solid; 
	border-color:silver; 
}

#p4{
	width:200px;
	height:200px;
	border: 1px solid; 
	border-color:silver; 
}



</style>
<script type="text/javascript" src="jquery.js"></script>
<script src="jqueryui.js"></script>
<script type="text/javascript">
var TreeTimer;
var crushTimer;
var chemicalTimer;
var dryingTimer;
var cuttingTimer;
var AtreeTimer;
var ApaperTimer;
var TreePerPage;

function TreePerPageTreeType(){
	$.ajax({
		   "url":"monitoring.do",
		   "type":"post",
		   "data":{"method":"treePerPageCountMonitoringTreeType", "treeType1":"소나무","treeType2":"오크나무","treeType3":"은행나무" },
		   "dataType":"json",
		   "success":function(treePerPage){
		    $("#treesPerPage1").empty();
		    $("#treesPerPage2").empty();
		    $("#treesPerPage3").empty();
		    $("#treesPerPage1").append(treePerPage.AtreeType+"장");
		    $("#treesPerPage2").append(treePerPage.BtreeType+"장");
		    $("#treesPerPage3").append(treePerPage.CtreeType+"장");
		   },
		   "error":function(xhr, status, errorMsg){
		   	 clearInterval(TreePerPage);
		   }
		  });
};

function Atree(){
	  $.ajax({
	   "url":"monitoring.do",
	   "type":"post",
	   "data":{"method":"treeCountMonitoringEnterprise", "enterprise1":"A사","enterprise2":"B사","enterprise3":"C사" },
	   "dataType":"json",
	   "success":function(tree){
	    $("#Atree").empty();
	    $("#Btree").empty();
	    $("#Ctree").empty();
	    $("#Atree").append(tree.Atree+"그루");
	    $("#Btree").append(tree.Btree+"그루");
	    $("#Ctree").append(tree.Ctree+"그루");
	   },
	   "error":function(xhr, status, errorMsg){
	    clearInterval(AtreeTimer);
	   }
	  });
	 };
	 function Apaper(){
	  $.ajax({
	   "url":"monitoring.do",
	   "type":"post",
	   "data":{"method":"paperCountMonitoringEnterprise", "enterprise1":"A사","enterprise2":"B사","enterprise3":"C사" },
	   "dataType":"json",
	   "success":function(paper){
	    $("#Apaper").empty();
	    $("#Bpaper").empty();
	    $("#Cpaper").empty();
	    $("#Apaper").append(paper.Apaper+"장");
	    $("#Bpaper").append(paper.Bpaper+"장");
	    $("#Cpaper").append(paper.Cpaper+"장");
	   },
	   "error":function(xhr, status, errorMsg){
	    clearInterval(ApaperTimer);
	   }
	  });
	 };

function Tree(){
	$.ajax({
		"url":"monitoring.do",
		"type":"post",
		"data":{"method":"selectMonitoringAllSuccessTree"},
		"dataType":"json",
		"success":function(map_list){
			$("#dialog1").empty();
			for(var i=0;i<map_list.AllListTree.length;i++){
				$("#dialog1").append("회사: "+map_list.AllListTree[i].enterPrise+" 나무타입: "+map_list.AllListTree[i].treeType+" 등급: "+map_list.AllListTree[i].treeGrade+" 나무 수: "+map_list.AllListTree[i].treeCount+" 주문 날짜: "+map_list.AllListTree[i].orderDate+"<br>");
				}
			$("#generatorA").empty();// 여기부터
			$("#generatorA").append(map_list.AllListTree.length);
		},
		"error":function(xhr, status, errorMsg){
			clearInterval(TreeTimer);
		}
	});
		};
		
		
	function Crush(){
		$.ajax({
			"url":"monitoring.do",
			"type":"post",
			"data":{"method":"selectMonitoringAllSuccessCrush", "result":"1"},
			"dataType":"json",
			"success":function(map_list){
				$("#dialog2").empty();
				for(var i=0;i<map_list.AllList1.length;i++){
					$("#dialog2").append("회사: "+map_list.AllList1[i].enterPrise+" 나무타입: "+map_list.AllList1[i].treeType+" 등급: "+map_list.AllList1[i].treeGrade+" 나무 무게: "+map_list.AllList1[i].treeWeight+" 생산 날짜: "+map_list.AllList1[i].productDate+"<br>");
						}
				$("#crushSuccess").empty();
				$("#crushBefore").empty();
				$("#crushBefore").append("나무 : "+ map_list.AllListTree.length + " | ");
				$("#crushSuccess").append("펄프 : " + map_list.AllList1.length);
			},
			"error":function(xhr, status, errorMsg){
				clearInterval(crushTimer);
			}
		});
	};
		
		function Chemical(){
	$.ajax({
		"url":"monitoring.do",
		"type":"post",
		"data":{"method":"selectMonitoringAllSuccessChemical", "result":"1"},
		"dataType":"json",
		"success":function(map_list){
			$("#dialog3").empty();
			for(var i=0;i<map_list.AllList2.length;i++){
				$("#dialog3").append("회사: "+map_list.AllList2[i].enterPrise+" 나무타입: "+map_list.AllList2[i].treeType+" 등급: "+map_list.AllList2[i].treeGrade+" 펄프 무게: "+map_list.AllList2[i].pulpWeight+" 생산 날짜: "+map_list.AllList2[i].productDate+"<br>");
					}
			$("#chemicalSuccess").empty();
			$("#chemicalBefore").empty();
			$("#chemicalBefore").append("펄프 : "+map_list.AllList1.length+" | ");
			$("#chemicalSuccess").append("화학 : "+map_list.AllList2.length);
		},
		"error":function(xhr, status, errorMsg){
			clearInterval(chemicalTimer);
		}
	});
		};
		
		function Drying(){
			$.ajax({
				"url":"monitoring.do",
				"type":"post",
				"data":{"method":"selectMonitoringAllSuccessDrying", "result":"1"},
				"dataType":"json",
				"success":function(map_list){
					$("#dialog4").empty();
					for(var i=0;i<map_list.AllList3.length;i++){
						$("#dialog4").append("회사: "+map_list.AllList3[i].enterPrise+" 나무타입: "+map_list.AllList3[i].treeType+" 등급: "+map_list.AllList3[i].treeGrade+" 종이 무게: "+map_list.AllList3[i].paperWeight+" 생산 날짜: "+map_list.AllList3[i].productDate+"<br>");
							}
					$("#dryingSuccess").empty();
					$("#dryingBefore").empty();
					$("#dryingBefore").append("화학 : "+map_list.AllList2.length+" | ");
					$("#dryingSuccess").append("건조 : "+map_list.AllList3.length);
				},
				"error":function(xhr, status, errorMsg){
					clearInterval(dryingTimer);
				}
			});
		};
		
		
		function Cutting(){
			$.ajax({
				"url":"monitoring.do",
				"type":"post",
				"data":{"method":"selectMonitoringAllSuccessCutting", "result":"1"},
				"dataType":"json",
				"success":function(map_list){
					$("#dialog5").empty();
					for(var i=0;i<map_list.AllList4.length;i++){
						$("#dialog5").append("회사: "+map_list.AllList4[i].enterPrise+" 나무타입: "+map_list.AllList4[i].treeType+" 등급: "+map_list.AllList4[i].treeGrade+" 종이 수: "+map_list.AllList4[i].paperCount+" 생산 날짜: "+map_list.AllList4[i].productDate+"<br>");
							}
					$("#cuttingSuccess").empty();
					$("#cuttingBefore").empty();
					$("#cuttingBefore").append("건조 : "+map_list.AllList3.length+" | ");
					$("#cuttingSuccess").append("종이 : "+map_list.AllList4.length);
				},
				"error":function(xhr, status, errorMsg){
					clearInterval(cuttingTimer);
				}
			});
		};
		
$(document).ready(function(){
	
	TreePerPage = setInterval("TreePerPageTreeType()",1000);
	
	AtreeTimer = setInterval("Atree()",1000);
	
	ApaperTimer = setInterval("Apaper()",1000);
	
	TreeTimer = setInterval("Tree()", 1000);
	
	crushTimer = setInterval("Crush()", 1000);

	chemicalTimer = setInterval("Chemical()", 1000);	
	
	dryingTimer = setInterval("Drying()", 1000);

	cuttingTimer = setInterval("Cutting()", 1000);
       
       $( "#dialog1" ).dialog({
    	   autoOpen: false,
    	   width: '800px',
    	   height:400,
    	   show: {effect: "blind", duration: 1000},
    	   hide: {effect: "explode", duration: 1000}
    		 });
       
       $( "#dialog2" ).dialog({
    	   autoOpen: false,
    	   width: '800px',
    	   height:400,
    	   show: {effect: "blind", duration: 1000},
    	   hide: {effect: "explode", duration: 1000}
    		 });
       
       $( "#dialog3" ).dialog({
    	   autoOpen: false,
    	   width: '800px',
    	   height:400,
    	   show: {effect: "blind", duration: 1000},
    	   hide: {effect: "explode", duration: 1000}
    		 });
       
       $( "#dialog4" ).dialog({
    	   autoOpen: false,
    	   width: '800px',
    	   height:400,
    	   show: {effect: "blind", duration: 1000},
    	   hide: {effect: "explode", duration: 1000}
    		 });
       
       $( "#dialog5" ).dialog({
    	   autoOpen: false,
    	   width: '800px',
    	   height:400,
    	   show: {effect: "blind", duration: 1000},
    	   hide: {effect: "explode", duration: 1000}
    		 });
       
       $("#treeOpener").click(function() {
    	   $( "#dialog1" ).dialog( "open" ); 
    	 });
       
       $("#crushOpener").click(function() {
    	   $( "#dialog2" ).dialog( "open" ); 
    	 });
       
       $("#chemicalOpener").click(function() {
    	   $( "#dialog3" ).dialog( "open" ); 
    	 });
       
       $("#dryingOpener").click(function() {
    	   $( "#dialog4" ).dialog( "open" ); 
    	 });
       
       $("#cuttingOpener").click(function() {
    	   $( "#dialog5" ).dialog( "open" );
    	 });
    
});

</script>

<title>메인화면</title>
</head>
<body>
<b>각 공정별 모니터링 현황</b><hr>
<div>
	<div id="div1">
	<table>
		<tr>
			<td>
				<div id="dialog1" title="tree생성중.." ></div>
				<div id="generator" >
					<button id="treeOpener"><img src="image/tree.png" style="height:150px;width:180px"></button>
					<span id="generatorA"></span>
					<span id="generatorB"></span>
					<span id="generatorC"></span>
				</div>
			</td>
			<td></td>
			<td>
			<div id="dialog4" title="drying.."></div>
				<div id="p3">
					<button id="dryingOpener"><img src="image/drying.PNG" style="height:150px;width:180px"></button>
					<span id="dryingBefore"></span>
					<span id="dryingSuccess"></span>
				</div>
			</td>
			<td> <img src="image/화살표 우측.PNG" style="height: 100pt; width: 100pt"> </td>
			<td>
			<div id="dialog5" title="cutting.."></div>
				<div id="p4">
					<button id="cuttingOpener"><img src="image/cutting.PNG" style="height:150px;width:180px"></button>
					<span id="cuttingBefore"></span>
					<span id="cuttingSuccess"></span>
				</div>
			</td>
		</tr>
		<tr>
			<td> <img src="image/화살표 하.PNG" style="height: 100pt; width: 100pt"></td>
			<td></td>
			<td> <img src="image/화살표 위.PNG" style="height: 100pt; width: 100pt"></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>
			<div id="dialog2" title="crush.."></div>
				<div id="p1">
					<button id="crushOpener"><img src="image/crush.PNG" style="height:150px;width:180px"></button>
					<span id="crushBefore"></span>
					<span id="crushSuccess"></span>
				</div>
			</td>
			<td> <img src="image/화살표 우.PNG" style="height: 100pt; width: 100pt"></td>
			<td>
			<div id="dialog3" title="chemical.."></div>
				<div id="p2">
					<button id="chemicalOpener"><img src="image/chemical.png" style="height:150px;width:180px"></button>
					<span id="chemicalBefore"></span>
					<span id="chemicalSuccess"></span>
				</div>
			</td>
			<td></td>
			<td></td>
		</tr>
	</table>
	</div>
	<div id="div2" align="center">
  <table cellspacing="0" border="1" style="width:350px; height: 150px;">
   <tr style="height: 50px;">
    <td style="width: 70px;"></td>
    <td style="width: 90px;">A회사</td>
    <td style="width: 90px;">B회사</td>
    <td style="width: 90px;">C회사</td>
   </tr>
   <tr>
    <td>구입한 나무수량</td>
    <td id="Atree"></td>
    <td id="Btree"></td>
    <td id="Ctree"></td>
   </tr>
   <tr>
    <td>생산된 종이수량</td>
    <td id="Apaper"></td>
    <td id="Bpaper"></td>
    <td id="Cpaper"></td>
   </tr>
  </table>
  <br>
  <table cellspacing="0" border="1" style="width:350px; height: 100px;">
  	<tr style="height: 50px;">
  		<td style="width: 75px;"></td>
  		<td style="width: 90px;">소나무</td>
  		<td style="width: 90px;">오크나무</td>
  		<td style="width: 90px;">은행나무</td>
  	</tr>
  	<tr>
  		<td>총 종이수</td>
  		<td id="treesPerPage1"></td>
  		<td id="treesPerPage2"></td>
  		<td id="treesPerPage3"></td>
  	</tr>
  </table>
 </div>
 </div>
</body>
</html>